<template>
  <div>
    <draggable
      v-model="localTodos"
      item-key="id"
      class="todo-list"
      ghost-class="ghost"
      @change="onDragChange"
    >
      <template #item="{ element: todo }">
        <TodoItem
          :todo="todo"
          @toggle-todo="$emit('toggle-todo', $event)"
          @delete-todo="$emit('delete-todo', $event)"
          @edit-todo="$emit('edit-todo', $event)"
        />
      </template>
    </draggable>
    
    <div v-if="todos.length === 0" class="empty-state">
      暂无待办事项，开始添加吧！
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import draggable from 'vuedraggable'
import TodoItem from './TodoItem.vue'

const props = defineProps({
  todos: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['toggle-todo', 'delete-todo', 'edit-todo', 'update:todos'])

const localTodos = computed({
  get: () => props.todos,
  set: (value) => emit('update:todos', value)
})

const onDragChange = (event) => {
  // 拖拽完成后的处理
  console.log('拖拽完成:', event)
}
</script>

<style scoped>
.todo-list {
  list-style: none;
  padding: 0;
  min-height: 100px;
}

.empty-state {
  text-align: center;
  color: #999;
  font-style: italic;
  margin-top: 2rem;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.ghost {
  opacity: 0.5;
  background-color: #c8ebfb;
  border: 2px dashed #007bff;
  border-radius: 4px;
}
</style>